<template>
  <div class="about">
    <el-tree :list="list"></el-tree>
  </div>
</template>
<script>
// 现在想：el-tree这个组件，自己调用自己，就可以实现循环了，但是这个组件目前是局部注册的，在自己的内部引用自己，
// 不能使用，所以必须将这个组件，做成一个全局注册的组件，这样子，就可以想在哪儿用，就在哪儿用
// import ElTree from '../components/el-tree.vue'

// 1. 递归组件就是自己调用自己的组件，就是递归组件
// 2. 递归组件的使用，可以帮助我们循环实现数据的渲染
// a === b
export default {
  // components: { ElTree },
  data() {
    return {
      list: [],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await this.$http.get('/data.json')
      this.recursionFunc(res.data)
      this.list = res.data
    },
    recursionFunc(list) {
      list.forEach((item) => {
        if (item.pid === 0) {
          item.show = true
        } else {
          item.show = false
        }
        if (item.children) {
          this.recursionFunc(item.children)
        }
      })
      return list
    },
  },
}
</script>
